<template>
  <div class="photo-container">
    <h3>{{ photoInfo.title }}</h3>
    <p class="sub-title">
      <span>发表时间:{{ photoInfo.add_time | dataFormate }}</span>
      <span>点击{{ photoInfo.click }}次</span>
    </p>
		<hr>

		<!-- 缩略图 -->
		<div class="thumbnail">
			<img :src="item.src" class="preview-img" v-for="(item,index) in list" height="100"
			@click="$preview.open(index,list)"
			:key="item.src">
		</div>
		<div v-html="photoInfo.content" class="content"></div>
		<!-- 评论组件 -->
		<com-box :id="id"></com-box>
  </div>
</template>
<script>
import comments from '../subcomponents/comment.vue';
export default {
  created() {
		this.getPhotoInfo();
		this.getThumbnail();
  },
  data() {
    return {
      id: this.$route.params.id,
			photoInfo: {},
			// 保存缩略图
			list:[]
    };
  },
  methods: {
    getPhotoInfo() {
      this.$http.get("api/getimageInfo/" + this.id).then(res => {
        if (res.body.status == 0) {
          this.photoInfo = res.body.message[0];
        }
      });
		},
		getThumbnail(){
			this.$http.get('api/getthumimages/'+this.id).then(res=>{
				if(res.body.status==0){
					res.body.message.forEach(item=>{
						item.w = 600;
						item.h = 400
					})
					this.list = res.body.message;
				}
			})
		}
	},
	components:{
		'com-box':comments
	}
};
</script>
<style lang="scss" scoped>
	.photo-container {
		h3 {
			font-size:15px;
			color:#26A2ff;
			text-align: center;
			margin: 15px 0;
		}
		.sub-title {
			display: flex;
			justify-content: space-between;
		}
		.thumbnail {
			img {
				margin: 10px;
				box-shadow: 0 0 8px #999;
			}
		}
		.content {
			font-size: 13px;
			line-height: 30px;
		}
	}

</style>


